<template>
	<div class="equipment">
		<view class="top">
			<text class="title">KOI全球托管中心</text>
		</view>
		<view class="price_Taiwan">
			<img src="/static/images/equipment/bging.png" alt="" style="width: 100%;height: 100%;" />
		</view>
		<view class="btn">
			<button @click="ownUse">自行使用</button>
			<button @click='trusteeship'>立即托管</button>
		</view>
	</div>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue'
	import { getManagerList } from '@/api/hostingCenter'
	onLoad(async () => {
		var { rows } = await getManagerList({ type: 0 })
		if (rows.length != 0) {
			uni.navigateTo({
				// 跳转到自动托管
				url: '/Trusteeship/selfCustody/index'
			})
		}
	})
	const trusteeship = () => {
		uni.navigateTo({
			url: '/Trusteeship/equipment/index'
		})
	}
	const ownUse = () => {
		uni.navigateTo({
			url: '/Trusteeship/selfCustody/index'
		})
	}
</script>

<style lang="scss" scoped>
	.equipment {
		position: relative;
		height: 92vh;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.top {
			display: flex;
			width: 100%;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 47px;

			.title {
				width: 100%;
				text-align: center;
				height: 56px;
				font-size: 40px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #21F5EA;
				line-height: 56px;
				letter-spacing: 1px;
			}
		}

		.btn {
			position: absolute;
			bottom: 30px;
			left: 0;
			width: 100vw;
			padding: 0 32px;
			box-sizing: border-box;
			height: 88px;
			display: flex;
			justify-content: space-between;

			&>:nth-child(1) {
				width: 47%;
				height: 88px;
				background: #00D0B9;
				border: none;
				border-radius: 16px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88px;
			}

			&>:nth-child(2) {
				width: 47%;
				height: 88px;
				border: none;
				background: #4E47FF;
				border-radius: 16px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88px;
			}
		}
	}

	.price_Taiwan {
		// width: 300px;

		.each {
			text-align: center;
			font-size: 40px;
			color: #21F5EA;

			&>text {
				font-size: 24px;
			}
		}
	}

	// ::v-deep .uni-placeholder{
	// 	display: none!important;
	// }
	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		width: 160px;
		height: 64px;
		color: #fff;
		margin: 32px auto 80px auto;
		line-height: 64px;
		text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 40px;
		/* border: 12px solid;
		border-image-source: url("../src/static/images/Shop/border.png");
		border-image-slice: 15;
		border-image-repeat: round;
		/* border-radius: 20px !important; */
		/* background-color: #000001; */
		/* padding: 0; */
		/* font-size: 24px; */
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: '购买设备';
		font-size: 45px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 10px;
		/* background-color: #000001; */
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}
</style>